<template>
  <div class="header">
    <van-icon name="arrow-left" class="icon" @click="toBack"/>
    <div>{{title}}</div>
  </div>
</template>

<script>
import {useRouter} from "vue-router";

export default {
  name: "MyHeader",
  props:['title'],
  setup(){
    const router = useRouter();
    const toBack = ()=> {
      router.back();
    };

    return {
      toBack
    }
  }
}
</script>

<style lang="less" scoped>
  .header {
    background-color: #fff;
    height: 80px;
    font-size: 30px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #d7d7d7;

    //.edit {
    //  font-size: 16px;
    //  position: absolute;
    //  right: 15px;
    //  font-weight: normal;
    //}

    .icon {
      position: absolute;
      left: 10px;
    }
  }
</style>